<script setup lang="ts">
	import ShopCarItem from '@/components/shopCarItem/shopCarItem.vue'
	import { ref } from "vue";

	const dataList = ref([]), pagingRef = ref()

	function queryList() {
		pagingRef.value.complete([1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5])
	}
</script>

<template>
	<view class="shop-car">
		<h4>项目实战之虚拟列表 z-paging</h4>
		<!-- <z-paging ref="pagingRef" @query="queryList" class="p-20" use-virtual-list use-compatibility-mode
			:extra-data="{id:'shopCar'}" auto-show-back-to-top use-safe-area-placeholder /> -->

		<!-- 1、简单实现
		** 没有使用到虚拟列表，只有下拉刷新，下滑加载操作，对于数据量少的完全够了 
		** 查看创建的 n 个dom
		** document.querySelectorAll('.bg-gray-200')
		-->
		<!-- <view class="content-list">
			<z-paging ref="pagingRef" v-model="dataList" @query="queryList" class="p-20">
				<template v-for="(item,index) in dataList">
					<ShopCarItem />
				</template>
			</z-paging>
		</view> -->

		<!-- 2、使用虚拟列表 该写法只能使用在非微信小程序中 
		** use-virtual-list：使用虚拟列表
		-->
		<!-- <view class="content-list">
			<z-paging ref="pagingRef" @query="queryList" use-virtual-list class="p-20">
				<template v-slot:cell="{item,index}">
					<ShopCarItem />
				</template>
			</z-paging>
		</view> -->

		<!-- 3、小程序兼容写法
		** 1）打开源码 /uni_modules/z-paging/components/z-paging/z-paging.vue 注释第105行，并把106行取消注释
		** 2）修改购物车页中的 z-paging
		** 		use-compatibility-mode 兼容写法
		** 		:extra-data="{id:'shopCar'}" 传递到Item的数据
		** 3）在 /src/components 目录下创建一个名为 zp-public-virtual-cell 的组件 不能更名
		** 4）兼容模式完全可行
		-->
		<view class="content-list">
			<z-paging ref="pagingRef" @query="queryList" use-virtual-list use-compatibility-mode class="p-20"
				:extra-data="{id:'shopCar'}" auto-show-back-to-top safe-area-inset-bottom>
				<template v-slot:cell="{item,index}">
					<ShopCarItem />
				</template>
			</z-paging>
		</view>

		<!-- 其他配置
		auto-show-back-to-top 返回顶部按钮
		safe-area-inset-bottom 底部安全距离 
		-->
	</view>
</template>

<style lang="scss" scoped>
	.shop-car {
		display: flex;
		flex-direction: column;

		h4 {
			height: 40rpx;
		}

		.content-list {
			flex: 1;

			.z-paging-content-fixed {
				top: 40rpx;
			}
		}
	}
</style>